<!-- 物料产品管理左边的列表 -->
<template>
  <!-- <a-layout style="flex: none !important">
    <a-layout-sider
      class="layout-demo"
      collapsible
      breakpoint="xl"
      reverse-arrow
      @collapse="collapse"
    >
      <a-scrollbar v-show="!isCollapsed" style="height: 600px; overflow: auto">
        <div class="scroll">
          <a-input-search
            search-button
            allow-clear
            class="search"
            placeholder="输入分类名称"
            v-model="searchVal"
          />

          <div class="scroll-content">
            <a-tree
              :fieldNames="{
                key: 'id',
                title: 'name',
              }"
              :data="treeData"
              v-model:expanded-keys="expandKey"
              :selected-keys="selectedKeys"
              showLine
              @select="getMatchInfo"
            >
            </a-tree>
          </div>
        </div>
      </a-scrollbar>
      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>
      </template>
    </a-layout-sider>
  </a-layout> -->
  <Drawer>
    <div class="scroll">
      <a-input-search
        search-button
        allow-clear
        class="search"
        placeholder="输入分类名称"
        v-model="searchVal"
      />

      <div class="scroll-content">
        <a-tree
          :fieldNames="{
            key: 'id',
            title: 'name',
          }"
          :data="treeData"
          v-model:expanded-keys="expandKey"
          :selected-keys="selectedKeys"
          showLine
          @select="getMatchInfo"
        >
        </a-tree>
      </div> </div
  ></Drawer>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import {
    GetClassificationList,
    PostClassificationList,
    DelClassificationList,
  } from '@/api/inventory-management/material-management';
  import mitter from '@/utils/mitt';

  const selectedKeys = ref();
  let searchVal = ref(''); // 搜索框
  let originTreeData = ref([]); // 储存最初的树形数据
  let expandKey: any = ref([]); // 储存当前搜索要展开的选项

  // 搜索值
  const searchData = (keyword: string) => {
    const loop = (data: any) => {
      const result: any = [];
      data.forEach((item: any) => {
        if (item.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
          result.push({ ...item });
        } else if (item.children) {
          const filterData = loop(item.children);
          if (filterData.length) {
            result.push({
              ...item,
              children: filterData,
            });
            expandKey.value.push(item.id);
          }
        }
      });
      return result;
    };

    return loop(originTreeData.value);
  };

  const isCollapsed = ref(false);
  const collapse = (collapsed: boolean) => {
    isCollapsed.value = collapsed;
  };

  /* 储存实时的属性数据 */
  const treeData = computed(() => {
    if (!searchVal.value) return originTreeData.value;
    return searchData(searchVal.value);
  });

  // 获取列表数据
  const getData = async () => {
    try {
      const data: any = {};
      originTreeData.value = await GetClassificationList({
        ...data,
      });
    } catch (error: unknown) {
      console.log(error);
    }
  };
  getData();

  // 获取符合的数据
  const getMatchIndex = (name: string): number => {
    if (!searchVal.value) return -1;
    return name.toLowerCase().indexOf(searchVal.value.toLowerCase()) as number;
  };

  const getMatchInfo = (e: number[], val: any) => {
    mitter.emit('MaterialId', e[0]);
  };

  mitter.on('reset', (val) => {
    if (val) selectedKeys.value = null;
  });
  // const isShow = ref(true);
  // mitter.on('show', (val) => {
  //   if (val) selectedKeys.value = null;
  // });
</script>

<style scoped lang="less">
  .layout-demo {
    width: 200px;
    background-color: #f5f7fa;
    .scroll {
      padding: 10px;
      .search {
        background-color: #fff;
        height: 40px;
        border: 1px solid #ccc;
      }
    }
  }
</style>
